<template>
  <ekDialog v-model="ekVisiable" title="出库" @submit="handleSubmit" >
    <div style="padding-right: 20px;;">
      <div>
        <div class="submit-item" v-if="outList?.length && !loading" style="text-align: left;">
          <template v-for="(detail, index) in outList" :key="index">
            <div
              style="
                display: flex;
                justify-content: space-between;
                padding: 20rpx;
                color: #999;  
              "
              class="mt-15"
            >
              <div class="f-14" style="color: #333;">转运单号：{{ detail.transfer_no }}</div>
              <div class="f-12 ">{{ getLable(payState, detail.pay_state) }}</div>
            </div>

            <div class="f-12  mt-8" style="padding-left: 20rpx; color: #999">
              提交时间：{{ detail.ctime }}
            </div>

            <div
              class="f-12  mt-8"
              style="padding-left: 20rpx; color: #999"
            >
             <el-text class="mx-1" type="success">   运输方式：{{ getLable(transportMode, detail.transfer_mode) }}</el-text>
           
            </div>
            <!-- <div
              class="f-24   mt-8"
              style="padding-left: 20rpx; color: #999"
            >
              <el-text class="mx-1" type="success">  所属用户：{{ detail.user_id }} {{ getUserName(detail) }}</el-text>
            
            </div> -->
            <el-divider content-position="left">包含包裹</el-divider>
            
              <!-- <template v-for="(item, idx) in getSubData(detail)" :key="idx"> -->
                
                <el-table ref="table" stripe :data="getSubData(detail)">
                 
                  <el-table-column
                    prop="order_logistic_no"
                    label="单号"
                    width="100"
                  >
                    <template #default="scope">
                      {{ scope.row.order_logistic_no }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="order_transport_type"
                    label="包裹类型"
                    width="100"
                  >
                    <template #default="scope">
                      {{ getLable(transportType, scope.row.order_transport_type) }}
                    </template>
                  </el-table-column>
                  <el-table-column label="体积（m³）" width="100">
                    <template #default="scope">
                      {{ scope.row.order_good_length }}*{{
                        scope.row.order_good_width
                      }}*{{ scope.row.order_good_height }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="proportion_volume"
                    label="比重体积"
                    width="100"
                  >
                    <template #default="scope">
                      {{
                        Number(
                          (scope.row.order_good_length *
                            scope.row.order_good_width *
                            scope.row.order_good_height) /
                            1000000
                        ).toFixed(3)
                      }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="proportion_weight"
                    label="比重重量"
                    width="100"
                  >
                    <template #default="scope">
                      {{ scope.row.proportion_weight }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="order_good_weight"
                    label="重量（kg）"
                    width="100"
                  >
                    <template #default="scope">
                      {{ scope.row.order_good_weight }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="throwing_weight"
                    label="体积重量"
                    width="100"
                  >
                    <template #default="scope">
                      {{ scope.row.throwing_weight }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="order_piece" label="件数" width="60">
                    <template #default="scope">
                      {{ scope.row.order_piece }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="order_inbound_time"
                    label="入库时间"
                    width="180"
                  >
                    <template #default="scope">
                      {{ scope.row.order_inbound_time }}
                    </template>
                  </el-table-column>
                </el-table>
              <!-- </template> -->
      
          </template>
        </div>
      </div>
      <div class="ek-form mt-15" v-loading="loading" >
        <el-form
          :model="form"
          :rules="rules"
          label-width="160px"
          ref="forms"
           label-position="top"
          v-if="!loading"
        >
          <el-form-item prop="transfer_outbound_no" label="出库单号">
            <ekInput v-model="form.transfer_outbound_no" />
          </el-form-item>
          <el-form-item prop="order_outbound_images" label="出库图片">
            <ekUploadImage
              v-model="form.order_outbound_images"
              :action="$uploadUrl"
              :multiple="true"
              accept="image/png,image/jpg,image/jpeg,image/gif,image/bmp"
              :limit="4"
              @on-success="success"
            />
          </el-form-item>
        </el-form>
      </div>
    </div>
  </ekDialog>
</template>

<script setup>
import {
  watch,
  getCurrentInstance,
  computed,
  reactive,
  ref,
  defineEmits,
  onMounted,
} from "vue";
import { apis } from "../data.js";
import ekDialog from "@/components/business/ekDialog/index.vue";
import ekInput from "@/components/form/ekInput/index.vue";
import ekSelect from "@/components/form/ekSelect/index.vue";
import ekTableSelect from "@/components/form/ekTableSelect/index.vue";
import ekSelectModel from "@/components/form/ekSelectModel/index.vue";
import ekUploadImage from "@/components/form/ekUploadImage/index.vue";
import ekTip from "@/components/business/ekTip/index.vue";
import { objectAssignment, getLable } from "@/utils/common.js";

import { getDimensionByCode } from "@/utils/sys.js";

const props = defineProps({
  // 显示隐藏
  visiable: {
    type: Boolean,
    default: false,
  },
  rowArr: {
    type: Array,
    default: "",
  },
});
const {
  appContext: {
    config: { globalProperties },
  },
} = getCurrentInstance();
const { $storage, $http, $ekLoading, $ekMessage,$uploadUrl } = globalProperties;

const emit = defineEmits(["update:visiable", "submit"]);

// 是否显示
const ekVisiable = computed({
  get() {
    return props.visiable;
  },
  set(value) {
    emit("update:visiable", value);
  },
});
const outList = computed(() => {
  return props.rowArr;
});
function handleSubmit(done) {
  let url = apis.outbound;

   let imgs = [];
  if(form.value.order_outbound_images){
     imgs = JSON.parse(form.value.order_outbound_images).map((item) => item.path);
  }
  forms.value.validate((valid) => {
    if (valid) {
      $http
        .request({
          url: url,
          method: "PUT",
          data: {
            transfer_outbound_no: form.value.transfer_outbound_no,
            transfer_outbound_images: imgs,
            transfer_ids: outList.value.map((item) => item.id)
          },
        })
        .then((res) => {
          $ekMessage.success(res.message);
          emit("submit", done);
        })
        .catch((err) => {});
    }
  });
}
const loading = ref(false);
let forms = ref(null);
let form = ref({});
const initData = () => {
  form.value = {
    transfer_outbound_no: "",
    order_outbound_images: "",
  };
};
const getUserName = (item) => {
  let user = userList.value.find((detail) => {
    return detail.id == item.user_id;
  });
  return user ? "(" + user.user_nick + ")" : "";
};
const getSubData = (item) => {
  let list = subList.value.filter((detail) => {
    return detail.tid == item.id;
  });
  console.log(list, "ggggggggggggg");
  return list?.length ? list : [];
};
let rules = reactive({
  transfer_outbound_no: [
    { required: true, message: "请输入出库单号", trigger: "blur" },
  ],
});

let subList = ref([]);
let userList = ref([]);
const transportType = ref({});
const transportMode = ref({});
const payState = ref({});

// 初始化表单
async function init() {
  loading.value = true;
  // 详情或者编辑
  let ids = props.rowArr.map((item) => item.id);
  let res = await $http
    .get(apis.getWaitOutboundDeatil, {
      params: {
        transfer_ids: ids,
      },
    })
    console.log(res, "ggggggggggggg111111111");
      transportType.value = res.data.type;
      transportMode.value = res.data.mode;
      subList.value = res.data.order_list;
      userList.value = res.data.user_list;

      loading.value = false;

}
watch(
  () => props.visiable,
  async (val) => {
    if (val) {
      initData();
      await init();
    }
  }
);
onMounted(async () => {
  let res = await getDimensionByCode("DIM_PAY_STATE");
  
  payState.value = res.map((item) => ({
    label: item.dimension_name,
    value: item.dimension_code,
  }));
});
</script>

<style scoped lang="scss"></style>
